// 导入 Flutter 的 Material Design 组件库
// Material 库提供了许多预定义的 UI 组件，用于构建符合 Material Design 规范的应用程序
import 'package:flutter/material.dart';
import '02_状态组件.dart';
import '03_Container组件.dart';

// 应用程序的入口函数
// Dart 程序的执行从这里开始
void main() {
  // 启动应用程序，并挂载根组件 MaterialApp
  runApp(
    // MaterialApp 是 Flutter 应用程序的根组件
    // 它封装了 Material Design 主题、导航功能等
    MaterialApp(
      // home 属性指定应用程序的主页面
      home: Scaffold(
        // appBar 属性定义页面顶部的应用栏
        appBar: AppBar(
          // leading 属性定义应用栏左侧的图标
          // Icon 组件用于显示 Material Design 中的图标
          leading: Icon(Icons.menu),
          // title 属性定义应用栏中间的标题
          // Text 组件用于显示文本
          title: Text(
            'Hello World',
            textDirection: TextDirection.ltr,
            style: TextStyle(
                fontSize: 30, fontWeight: FontWeight.bold, color: Colors.red),
          ),
          // 应用栏背景色
          backgroundColor: Colors.orange,
        ),

        // body 属性定义页面的主要内容区域
        // body: MyApp(title: '改了'),
        body: BodyApp(),

        // 底部tab栏
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: '首页',
                backgroundColor: Colors.red),
            BottomNavigationBarItem(
                icon: Icon(Icons.search),
                label: '搜索',
                backgroundColor: Colors.red),
            BottomNavigationBarItem(
                icon: Icon(Icons.person),
                label: '我的',
                backgroundColor: Colors.red)
          ],
          currentIndex: 0,
          onTap: (index) {},
        ),

        // 浮动按钮
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {},
        ),
      ),

      // 是否显示调试模式的横幅
      debugShowCheckedModeBanner: false,
    ),
  );
}

// class BodyApp extends StatelessWidget {
//   const BodyApp({super.key});

//   @override
//   Widget build(BuildContext context) {
//     return Container(
//         width: 200,
//         height: 200,
//         // 此处的color与decoration的color冲突，只能使用一个
//         // color: Colors.red,
//         padding: EdgeInsets.all(15),
//         // margin: EdgeInsets.all(15),
//         margin: EdgeInsets.symmetric(horizontal: 15, vertical: 15),
//         decoration: BoxDecoration(
//           color: Colors.orange,
//           border: Border.all(width: 2, color: Colors.red),
//           // borderRadius: BorderRadius.all(Radius.circular(10)),
//           // borderRadius: BorderRadius.circular(10),
//           borderRadius: BorderRadius.only(
//               topLeft: Radius.circular(10), bottomRight: Radius.circular(10)),
//         ),
//         child: Container(
//           color: Colors.yellow,
//           child: Center(
//             child: Text('Hello World'),
//           ),
//         ));
//   }
// }
